<template>
  <div class="main">
    <template v-for="(item, index) in renderData" :key="index">
      <MaterialGroup
        ref="formGroup"
        :render-data="item"
        :rules="rules"
        :formValues="formValues"
        @formChange="handleChangeData"
      />
    </template>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
// 20240805改了store
// import { useStore } from 'vuex'
import store from '@/render/store/index'

import MaterialGroup from './MaterialGroup.vue'

// const store = useStore()
const renderData = computed(() => store.getters?.renderData)
const rules = computed(() => store.state?.rules)
const formValues = computed(() => store.state?.formValues)

const handleChangeData = (data: any) => {
  console.log(data)
  store.dispatch('changeData', data)
}
</script>
<style scoped lang="scss">
.main {
  border-radius: 8px;
}
</style>